Membuat gridView 

PGridview sama sepeti listview 

Listview hanya satu column 

Kita tidak bisa menampilkan list view 2column 
Listview hanya satu sedangkan 

Gridview bisa lebih dari Satu 
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override 
build(BuildC 
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D) Use key in widget constructors 
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Untuk membuat grid view kita 
Memakai widget gridview 
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centerTitle: true, 


: GridView(gridDelegate: |), 
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Gridview ada property yg harus diisi gridDelegete: ini membutuhkan 
Yg namany 


Grid View 


t ( 


centerTitle: 


)» 


body: 
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erGridDelegate 


" od e.c m-otu0ue»:uu C ^ 
Kalau delegate karna abstract class 

Tapi kita pakai ini yg hanya 2 

Biasa pakai axiscount 

Jadi kita jalankan dahulu 

Kita isichildrenkalau isi container 

Lalu warna rgb mengunakan warna random 

Ini seudah selesai membuat container nya 


(=) 
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Selection View Go Run Terminal Help main.dart - recipes app - Visual Studio ( 


x 


centerTitle: 
)» 
body: GridView 
gridDelegate 
children: [ 
Contai 


color: Color.fromARGB( 


C 


hdom() .nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 


d, but there's no cc g argument 
the required argurr 


y in widget constructors. 
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ode 
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Ini hanya satu container 
Kembali lagi ke slivergridDelegete 
Kita isi 4, 
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& maindat X 
[3 I 
gridDelegate: i SridDeleg 
crossAxisCount: 


» 
children: 
Container( 
color: Color.fromARGB( 


idom() .nextInt(255), 
).nextInt(255), 
om().nextInt(255), 
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Dan container kita membuat lebih 
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& 


.nextInt(255), 
.nextInt(255), 
.nextInt(255), 


Container( 
color: Color.fromARGB( 
255, 


Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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Kasih padding agar adaa jarak 
Gridview refactor wrap padding 
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@override 


child: Gri 


gridDelegat E 
crossAxisCount: 4 


7. 


children 
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yg ini namanya gridview 

Kemudian silvergridelege ini apa 

Artiny jumlah row nya berapa disini ada 4 row 

Kemudian ada namanya 

Crosspang agar ada jarak 

Kita tambah 3 lagi 
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[3 M 
body: Paddi 
padding: 
child: Gri 
gridDelegate: 
crossAxisCount: 


crossAxisSpacing: 10, 


», 
children: [ 
Containe 
fromARGB( 
, 
ndom().nextInt(255), 
dom().nextInt(255), 
dom().nextInt(255), 
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Selection View Go Run Terminal Help main dart - recip 
& maindat X 
& 
body: Padding( 
padding: « t EdgeInsets.all(z 
child: GridVie 
gridDelegat SliverGridDe 

crossAxisCount: 4|, 
crossAxisSpacing: 10, 
mainAxisSpacing: 10, 


), 
children: [ 


or. fromARGB ( 


m().nextInt(255), 
m().nextInt (255), 
Random().nextInt(255), 
M £ 
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Main untuk jarak atas bawah 
Calau cros untukk samping 
Coba ganti count 
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IN 


body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView( 
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 


crossAxisCount: 2, 
crossAxisSpacing: 
mainAxisSpacing: 
», 
children: [ 
Container( 
color: Color .fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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Use key in widget constructors. 
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Ini bisa scroll sama dengan list view 

Ini bisa diubah mau berapa pun 

Disini juga ada namanya 

Aspecratio untuk menentukan ratio dari childnya atau containernya 
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& maindat X 
& 
body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView( 
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 
childAspectRatio: 2 / 3, 
crossAxisCount: 
crossAxisSpacing 
mainAxisSpacing: 
), 
children: [ 
Container ( 
color: Color. fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 


Use key in widget constructors. 
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Kalu bikin 4 maka bisa lebih panjang 
Kita bisa menentukan ukuran dari childnya 
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nain.dart - recip 
& main.dart 
£ 
body: Padding( 


padding: EdgeInsets.all(20.0), 


child: GridView( 


gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 
childAspectRatio: 2 / 4, 
crossAxisCount: 3, 
crossAxisSpacing: 10, 
mainAxisSpacing: 10, 
), 
children: [ 
Container ( 
color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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Ini yg pertama mengunkan grid view 


Sekarang kita memakai count 
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body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView.count( 
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 
childAspectRatio: 2 / 4, 
crossAxisCount: 3, 
crossAxisSpacing: 10, 
mainAxisSpacing: 10, 
IE 
children: | 


Container( 


color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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eguired, but there's n 1g argument 
arg 
r 'gridDelegate' isn't defined. 


sting named parameter's name, « 1g a named paramete 
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a ; 
Disini kita tidak bisa mamak delege kita hapus ada item yg wajib 
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EdgeInsets.all(20.0), 
.count( 
crossAxisCount: 
children: [ 
Container( 


color lor. fromARGB ( 


.nextInt(255), 
.nextInt(255), 


.nextInt(255), 


Container( 
color: or.fromARGB( 
255, 
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Count tidak pakai itu 
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body: P 

padding st EdgeInsets.all(20.0), 

child: Gr w.count( 
crossAxisCount: 
mainAxisSpacing 
crossAxisSpacing: 
children: [ 

Container( 
color: r. fromARGB( 


().nextInt(255 
().nextInt(255 
Random().nextInt(255 


), 
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Ini bisa diatur 

Count kita tidak usah pakai delege yg tadi 
Berikutnya builder 

Kita hapus containernya 

Builder sama dgn listbuilder 


Itembuilder: akan menreturn containernya 
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appBar: A ar( 
title: Text( 
centerTitle: true, 
), 
body: Padding( 
padding: const EdgeInsets.all(20.0), 
child: Gri builder( 
itemBuilder: ((context, index) -» Container( 
color: or.fromARGB( 


m().nextInt(255), 
ndom().nextInt(255), 
Random().nextInt(255), 
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Disini juga butuh SliverDelegete 
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& maindat € 


< 
), 
body: Paddi 
padding: 
child: Gr 
gridDelegate: 
crossAxisCount: 2 
mainAxisExtent: 20, 
crossAxisSpacing: 20, 
) 
itemBuilder: ((context, index) -» Container( 
color: Color.fromARGB( 


2 
@ 


().nextInt (255) 
m() .nextInt(255) 
m( ).nextInt(255) 


, 
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Coba kita ganti builder nya 
Seharus nya ada item count 
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main.dart - recipes app - Visual Studio Code 
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& maindat x 
& + m 
), 
body: P 
paddi 
child: V 
gridDelegat 
crossAxisCount: 
mainAxisExtent: 
crossAxisSpacing: 
)» 
itemCount: 
itemBuilder: 


Gric 


legateWithFixedCros 


SliverGridDe 


((context, index) -» Container( 
lor.fromARGB( 


().nextInt(255 
().nextInt(255), 
().nextInt(255), 
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Kita hapus ganti 
mainAxis 

X] File Edit 
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& 


body: Padd 
padding: 
child: Gr 
gridDelegat li 
crossAxisCount: 
mainAxisSpacing: 
crossAxisSpacing: 
)» 
itemCount: 
itemBuilder: 
color: Co 
255, 


builder( 


10, 


((context, index) -» Container( 
^. fromARGB( 


256 


().nextInt(255), 
m().nextInt(255), 
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7) Syncing files 
(©) Hot Reload comp 
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pakai aspec 


Maka sama dgn memakai gridview pertama sama bisa 
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& main.dart 
IN 
mainAxisSpacing: 10, 
crossAxisSpacing: 10, 
childAspectRatio: 1 / 2, 


) 
itemCount: 10, 
itemBuilder: ((context, index) => Container( 
color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 


Random().nextInt(255), 
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Ini bisa menentukan jumlah nya 
Berikutnya ada 

Gridview.Extend 

Tidak membutuhkan delegate 
Kita hapus 
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MaterialApp( 
home: Scaffold( 

appBar: AppBar( 
title: Text( 
centerTitle: 


), 

body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView.extent( 


s required, but io corresponding argument. 


Kita buat dahulu children nya 
Container 4 — 
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& T 


title: Text( 
centerTitle: 
1. 
body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView.extent( 
children: [ 
Container( 
color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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Kemudian item logicnya 
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Widget build(BuildContext context) { 
MaterialApp( 
home: Scaffold( 
appBar: AppBar( 
title: Text( 
centerTitle: 
), 
body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView.extent( 
maxCrossAxisExtent: 100, 
children: [ 
Container ( 
color: Color.fromARGB( 
255, 


Random()unextInt (255), 


tructors. 
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Ini lebar dari container nya kita tidak bisa menemkuan berapa jumlah nya berapa 
Kita memnentukan 
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& main.dart 
& 
appBar: AppBar( 
title: Text( 
centerTitle: 
), 
body: Padding( 


padding: EdgeInsets.all(20.0), 


child: GridView.extent( 
maxCrossAxisExtent: 2|, 
children: [ 
Container( 


color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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Kalau 100 maka 4 column 


Go Run Terminal Help 


& main.dart 
& 
appBar: AppBar( 


title: Text( 
centerTitle: 


), 
body: Padding( 
padding: 


EdgeInsets.all(20.0), 
child: GridView.extent( 

maxCrossAxisExtent: 100, 
children: [ 

Container( 

color: Color.fromARGB( 

255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt(255), 
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Kalau 500 dia hanya Saturday jadi extent menentukan dari lebar childenya 
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appBar: AppBar( 
title: Text( 
centerTitle: 
), 
body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView.extent( 
maxCrossAxisExtent: 500, 


mainAxisSpacing: 20, 
children: [ 


Container( 
color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt (255), 
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Ini menentukan childnya 


) File Edit Selection View Go Run Terminal Help main.dart 


& maindat X 


“ 


appBar: AppBar( 
title: Text( 
centerTitle: 
1. 
body: Padding( 
padding: EdgeInsets.all(20.0), 
child: GridView.extent( 
maxCrossAxisExtent: 200, 
mainAxisSpacing: 20, 
children: [] 
Container( 
color: Color.fromARGB( 
255, 
Random().nextInt(255), 
Random().nextInt(255), 
Random().nextInt (255), 
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Gripview cukup disni 


import 'dart:math': 


import 'package:flutter/material.da 


import 'package:flutter/widgets.da 


void main() 4 


myApp ; StatefulWidget { 
nyApp({Key? key}) : (key: key); 


@override 
State<myApp> 
| 


_myAppState Is State<myApp> { 
@override 
Widget build(BuildContext context) { 
MaterialApp( 
home: Scaffold( 
appBar: AppBar( 
title: Text( Jo 
centerTitle: 
), 
body: Padding( 
padding: Edgelnsets.all(20.0), 
child: GridView.extent( 
maxCrossAxisExtent: 200, 
mainAxisSpacing: 20, 
crossAxisSpacing: 20, 
children: [ 
Container( 
color: Color.fromA 
255) 
RandomY().nextlr 
Random().next 
Random().r 


Container( 
color: Color. 
255% 
Random().next 
RandomY().nextlr 
Random().ne 


Container( 

color: Color.fron 
255, 
Random/().nextir 
Random().ne 
Random().r 


Container( 
color: Color. 
255; 
Random().ne 
Random/().nextini 
Random().ne 


Container( 

color: Color.fror 
255; 
RandomY().nextlr 
RandomY().nextlr 
Random().r 


